<template>
  <div>
    <div class="dataTitle"><p>{{datename}}</p></div>
    <div class="content1">
        <div class="content1-top">
            <div>安排表</div>
            <div><div><i class="el-icon-download"></i></div></div>
        </div>
        <div class="content1-content">
            <div class="content1-content-left">
                <div style="background-color:#EBEEF5">日期</div>
                <div>认领缺口额度</div>
                <div style="background-color:#EBEEF5">日期</div>
                <div>认领缺口额度</div>
            </div>
            <div class="content1-content-right">
                <div v-for="item in itemEles" :key="item.index">
                    <div style="background-color:#EBEEF5">{{item.date}}</div>
                    <div>{{item.value}}</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            datename: "2022年09月10日-2022年09月16日",
            itemEles:[
                {
                    index:0,
                    date:"周一(2022年09月10日)",
                    value:300
                },
                {
                    index:1,
                    date:"周二(2022年09月11日)",
                    value:300
                },
                {
                    index:2,
                    date:"周三(2022年09月12日)",
                    value:300
                },
                {
                    index:3,
                    date:"周四(2022年09月13日)",
                    value:300
                },
                {
                    index:4,
                    date:"周五(2022年09月14日)",
                    value:300
                },
                {
                    index:5,
                    date:"周六(2022年09月15日)",
                    value:300
                },
                {
                    index:6,
                    date:"周日(2022年09月16日)",
                    value:300
                }
            ]
        }
    },
}
</script>

<style scoped>
.dataTitle{
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    font-weight: 500;
}
.content1{
    width: 100%;
    border: 1px solid #EBEEF5;
}
.content1-top{
    display: flex;
    width: 100%;
    height: 40px;
    font-size: large;
}
.content1-top>div{
    width: 50%;
    line-height: 40px;
}
.content1-top>div:first-child{
    padding-left: 10px;
}
.content1-top>div:last-child>div{
    float: right;
    padding-right: 30px;
}
.content1-content{
    width: 100%;
    height: 200px;
    
    display: flex;
}
.content1-content-left{
    width: 20%;
    height: 200px;
}
.content1-content-right{
    width: 80%;
    height: 200px;
}
.content1-content-left>div{
    height: 50px;
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: large;
}
.content1-content-right>div{
    float: left;
    width: 25%;
    height: 100px;
}
.content1-content-right>div>div{
    
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: large;
}
</style>